.glare-hover {
   width: var(--gh-width);
   height: var(--gh-height);
   background: var(--gh-bg);
   border-radius: var(--gh-br);
   border: 1px solid var(--gh-border);
   overflow: hidden;
   position: relative;
   display: grid;
   place-items: center;
 }
 
.glare-hover::before {
  content: '';
  position: absolute;
  inset: 0;
 background: linear-gradient(
   var(--gh-angle),
   hsla(0, 0%, 0%, 0) 40%,
   var(--gh-rgba) 50%,
   hsla(0, 0%, 0%, 0) 60%
 );
  transition: none;
 background-size:
   var(--gh-size-x, var(--gh-size)) var(--gh-size-y, var(--gh-size)),
   100% 100%;
  background-repeat: no-repeat;
 /* Use CSS variables for start position so pages can customise the path */
 background-position:
   var(--gh-start-x, 50%) var(--gh-start-y, -100%),
   0 0;
}

.glare-hover:hover {
  cursor: pointer;
}

.glare-hover:hover::before {
  transition: var(--gh-duration) ease;
 /* And corresponding end position */
 background-position:
   var(--gh-end-x, 250%) var(--gh-end-y, 100%),
   0 0;
}
 
.glare-hover--play-once::before {
  transition: none;
  animation: none;
}

.glare-hover--play-once.glare-animating::before,
.glare-stack-item.glare-animating {
  animation: glare-sweep var(--gh-duration) ease forwards;
}

.glare-stack-item {
  background: linear-gradient(
    var(--gh-angle, 120deg),
    hsla(0, 0%, 0%, 0) 40%,
    var(--gh-rgba, rgba(255, 255, 255, 0.9)) 50%,
    hsla(0, 0%, 0%, 0) 60%
  );
  background-size:
    var(--gh-size-x, 900%) var(--gh-size-y, 350%),
    100% 100%;
  background-repeat: no-repeat;
  background-position:
    var(--gh-start-x, 80%) var(--gh-start-y, -120%),
    0 0;
}

@keyframes glare-sweep {
  from {
    background-position:
      var(--gh-start-x, 50%) var(--gh-start-y, -100%),
      0 0;
  }
  to {
    background-position:
      var(--gh-end-x, 250%) var(--gh-end-y, 100%),
      0 0;
  }
}

/* Reset instantly after animation completes (handled by JS) */
.glare-hover--play-once.glare-complete::before {
  animation: none;
  background-position:
    var(--gh-start-x, 50%) var(--gh-start-y, -100%),
    0 0;
}